Drag and Drop File Upload using DropzoneJS, PHP & MySQL

Drag and drop file upload is a very successful way to make your web application user-friendly. Generally, this feature allows you to drag an element and drop it to a different location on the web page. The drag and drop function can be used for a number of purposes in the web application. Drag & Drop is the best choice if you want to make file upload features more interactive.

DropzoneJS is an open-source JavaScript library that enables a drop-down HTML feature. This means that the user can drag and drop files from the device to this HTML feature.

DropzoneJS does not handle the file upload feature but sends files to the server through AJAX. You need to use PHP to upload files to your server. In this tutorial, we’ll teach you how to integrate drag and drop upload files using Dropzone JS, PHP, and MySQL.

DropzoneJS offers a simple way to combine drag and drop multiple file uploads with a preview of the web application. Dropzone is flexible and does not depend on any other jQuery library.

The following steps will be followed to implement the drag & drop file upload functionality.

• Droppable element to select multiple files from the computer or device.
• Preview of the selected files or images.
• Upload files to the server & Insert files information in the database using PHP & MySQL.

Before getting started, take a look at the file structure of drag & drop file upload with PHP.

drag_drop_file_upload_with_php/
├── dbconfig.php
├── index.php
├── upload.php
├── uploads/
├── js/
│   ├── dropzone.min.js
└── css/
    └── dropzone.min.css

Create Database Table

A table is required in the database to store the details of the uploaded file. The following SQL generates a table with some basic fields in the MySQL database.

CREATE TABLE files (
 id int(11) NOT NULL AUTO_INCREMENT,
 file_name varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 uploaded_on datetime NOT NULL,
 PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Create Database Configuration (dbconfig.php)

The dbconfig.php file is used to connect and select the database. Specify the database hostname ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Create file (index.php) to Drag and Drop File Upload

The Dropzone JS library will be used to integrate the Drag&Drop feature, so first include the Dropzone JS library and the CSS library.

 


    

                

                    

                        Drop files here or click to upload.

                        (This is for demo purpose. Selected files are not actually uploaded.)
                    
                    
                
                UPLOAD